# Учебный проект: Карусель

Создайте класс `Carousel`, описывающий компонент "Карусель". С данным компонентом интерфейса мы уже познакомились в предыдущем занятии, и для решения этой задачи, вам понадобятся ваши наработки. Главным отличием этой задачи будет использование компонентного подхода.

В качестве аргумента в конструктор класса передаётся массив слайдов для отображения:

```js
let slides = [
  {
    name: 'Penang shrimp', // Название товара со слайда
    price: 16, // Цена товара со слайда
    image: 'penang_shrimp.png', // Название файла картинки со слайда
    id: 'penang-shrimp' // Уникальный идентификатор товара со слайда
  },
  {
    name: 'Chicken cashew',
    price: 14,
    image: 'chicken_cashew.png',
    id: 'chicken-cashew'
  },
];

let carousel = new Carousel(slides);
```

После этого в `carousel.elem` должен быть доступен корневой DOM-элемент карусели. 

На вёрстку можно посмотреть в файле `static.html`, а пример использования - в файле `index.html`. Вёрстка идентична вёрстке из предыдущей задачи про карусель, однако в этот раз вам нужно будет отрисовать её самим. 

## Отрисовка вёрстки компонента

Как видно из вёрстки готовой карусели в файле `static.html`:
- корневой элемент компонента имеет класс `carousel` 
- все слайды находятся внутри элемента с классом `carousel__inner`
- вёрстка одного слайда выглядит вот так:

```html
<div class="carousel__slide" data-id="penang-shrimp">
  <img src="/assets/images/carousel/...значение slide.image..." class="carousel__img" alt="slide">
  <div class="carousel__caption">
    <span class="carousel__price">€<!--значение slide.price--></span>
    <div class="carousel__title"><!--значение slide.name--></div>
    <button type="button" class="carousel__button">
      <img src="/assets/images/icons/plus-icon.svg" alt="icon">
    </button>
  </div>
</div>
```

Обращаем ваше внимание:
- Цена представлена в объекте слайда, как число (например, вот так: `10`), но отобразить её нужно, во-первых, со значком валюты в начале - `€`, а во-вторых, с двумя символами после точки - `€10.00`. Чтобы получить два символа, воспользуйтесь методом числа `toFixed`, про который можно прочитать [вот в этой статье](https://learn.javascript.ru/number#okruglenie).
- Нужно дополнить путь к картинке слайда. Все картинки слайдов лежат в папке `/assets/images/carousel`. В тоже время, для каждого слайда, нам нужно прописать путь к конкретной картинке. Название картинки вы найдёте в свойстве `image` объекта слайда. В итоге у вас должен получится путь вида `/assets/images/carousel/penang_shrimp.png`, где `penang_shrimp.png` вы возьмёте из свойства `image`. Этот путь нужно прописать в атрибут `src` картинки `img` с CSS классом `carousel__img`.
- Записать ссылку на корневой HTML элемент в свойство `elem`. Вёрстка всей карусели имеет корневой элемент: `div` с классом `carousel`. Так вот, ссылку на этот элемент нужно записать в свойство `elem`, вот так:
```js
let carousel = new Carousel(slides);
console.log(carousel.elem); // Корневой HTML элемента карусели
```

## Переключение слайдов по стрелкам

Требования к переключениям слайдов точно такие же, как в предыдущей задаче про карусель. Отличие в том, что здесь количество слайдов не фиксированное, а может быть любым. Это нужно будет учесть в решении, а в остальном вы можете переиспользовать ваш код.

## Событие при клике на "+"

Кроме показа карусели и переключения слайдов, нужно генерировать событие при клике по кнопке добавления `"+"`.

В нашем проекте товары можно будет добавлять не только из "Карточки товара", но и из "Карусели".

А именно, при клике пользователя по кнопке с классом `carousel__button` генерировать пользовательское событие на корневом HTML элементе компонента (который хранится в свойстве `elem`), такого вида: 

```js
new CustomEvent("product-add", { // имя события должно быть именно "product-add"
    detail: slide.id, // Уникальный идентификатора товара из объекта слайда
    bubbles: true // это событие всплывает - это понадобится в дальнейшем
}
```

Как вы видите, для генерации такого события необходим уникальный идентификатор товара (`slide.id`). Для простоты его можно хранить в дата-атрибуте. К примеру, мы используем атрибут `data-id` на элементе слайда.

Про пользовательские события можно прочитать в статье - [Генерация пользовательских событий](https://learn.javascript.ru/dispatch-events).
